import 'package:flutter/material.dart';

/// color和 colorBlendMode：在图片绘制时可以对每一个像素进行颜色混合处理，color指定混合色，而colorBlendMode指定混合模式；
class ImagesDemoHome extends StatelessWidget {
  const ImagesDemoHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("图片控件"),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("加载网络图片"),
              SizedBox(height: 15,),
              Container(
                child: Image.network(
                  "http://img0.dili360.com/ga/M01/48/3C/wKgBy1kj49qAMVd7ADKmuZ9jug8377.tub.jpg",
                  alignment: Alignment.topCenter,
                  repeat: ImageRepeat.repeatY,
                  color: Colors.black87, // 指定混合色
                  colorBlendMode: BlendMode.colorDodge, // 指定混合模式
                ),
                width: 300,
                height: 300,
                color: Colors.yellow,
              ),
              SizedBox(height: 15,),
              Text("加载本地图片"),
              SizedBox(height: 15,),
              Container(
                // assets/images/img_placeholder.jpeg
                child: Image.asset(
                  "assets/images/img_placeholder.jpeg",
                  fit: BoxFit.cover,
                  height: 120,
                ),
              ),
              Text("CircleAvatar-实现图片圆角"),
              CircleAvatar(
                radius: 100,
                backgroundImage: NetworkImage(
                    "http://img0.dili360.com/ga/M01/48/3C/wKgBy1kj49qAMVd7ADKmuZ9jug8377.tub.jpg"),
                child: Container(
                  alignment: Alignment(0, .5),
                  width: 200,
                  height: 200,
                  child: Text("兵长利威尔"),
                ),
              ),
              Text("ClipOval-实现图片圆角"),
              ClipOval(
                child: Image.network(
                  "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
                  width: 200,
                  height: 200,
                ),
              ),
              Text("Container+BoxDecoration-实现图片圆角"),
              Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    image: DecorationImage(
                        image: NetworkImage(
                            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"))),
              )
            ],
          ),
        ),
      ),
    );
  }
}
